<template>
  <div>
      <div class="head">
          根据订单编号查询:
          <input class="inp" type="text" placeholder="请输入订单编号" v-model="inputtext">
          <button class="btn" @click="handerserch"><a> 快速查询</a></button>
      </div>
    <a-table :columns="columns" :data-source="dataList">
      <a slot="name" slot-scope="text">{{ text }}</a>
      <span slot="customTitle"><a-icon type="smile-o" /> 订单编号</span>
      <span slot="tags" slot-scope="tags">
        <a-tag
          :color="tags === '未发货' ? 'red' : 'green'"
        >
          {{ tags }}
          
        </a-tag>
      </span>
      <span slot="action" slot-scope="_text, record">
        <a @click="handleDelete(record)">删除</a>
        <a-divider type="vertical" />
        <a @click="handlelook(record)">查看详情</a>
        <a-divider type="vertical" />
        <a class="ant-dropdown-link" />
        <a @click="handleredit(record)">编辑</a>
      </span>
    </a-table>
   
    <a-modal :visible="showDeleteModal" @ok="deleteItem" @cancel="handleCancel">
    <h3>商品详情</h3>
      {{ deleteContent }}
      
    </a-modal>

    <a-modal :visible="showDeleteModal1" @ok="deleteItem1" @cancel="handleCancel1">
    <h3>修改订单状态</h3>
    <add-form :ordernumber="ordernumber" :fn="fn" :getdataList="getdataList"/>
      {{ deleteContent1 }}
    </a-modal>

     <a-modal :visible="showDeleteModal2" @ok="deleteItem2" @cancel="handleCancel2">
    <h3>删除</h3>
      {{ deleteContent2 }}
    </a-modal>
  </div>
</template>
<script>
const columns = [
  {
    dataIndex: "name",
    key: "name",
    slots: { title: "customTitle" },
    scopedSlots: { customRender: "name" },
  },
  {
    title: "联系人手机",
    dataIndex: "age",
    key: "age",
    scopedSlots: { customRender: "age" },
  },
  {
    title: "发货时间",
    dataIndex: "sendtime",
    key: "sendtime",
    scopedSlots: { customRender: "sendtime" },
  },
  {
    title: "发货地址",
    dataIndex: "sendadd",
    key: "sendadd",
    scopedSlots: { customRender: "sendadd" },
  },
  {
    title: "收货地址",
    dataIndex: "signadd",
    key: "signadd",
    scopedSlots: { customRender: "signadd" },
  },
  {
    title: "订单状态",
    key: "tags",
    dataIndex: "tags",
    scopedSlots: { customRender: "tags" },
  },
  {
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "action" },
  },
];
import {post} from "./../utils/request"
import AddForm from './list/components/addForm';
import {message} from "ant-design-vue"

export default {
  data() {
    return {
      columns,
      showDeleteModal: false,
      showDeleteModal1:false,
      showDeleteModal2:false,
      itemData:null,
      delateNum:null,
      WLlist:[],
      inputtext:null,
      ordernumber:null,
    };
  },
  mounted() {
    this.getdataList();

  },
  methods: {
    fn:function(bool) {
      this.showDeleteModal1=bool
    },
    // 点击搜索
    handerserch:function(){
      var a =this.inputtext;
      let obj={
        name:a
      }
      post("/user/getUserList",obj).then((data) => {
        this.WLlist = data;
      })
      
    },
    // 获取数据
    getdataList:function(params){
      post("/user/getUserList", params).then((data) => {
        if (!Array.isArray(data)) {
          return;
        }
        this.WLlist = data;
      });
    },
    //点击查看详情
    handlelook: function (data) {
      this.showDeleteModal = true;
      this.itemData=data
     console.log(this.itemData);
    },
    // 点击编辑修改订单状态
    handleredit:function(a){
        this.ordernumber=a
        console.log(this.ordernumber);
        this.showDeleteModal1 = true;
    },
    
    // 点击删除的回调
    handleDelete:function(num){
        // console.log(num.name);
        this.showDeleteModal2 = true;
        this.delateNum=num.name;
    },
    handleCancel2: function(){
        this.showDeleteModal2 = false;
    },
    deleteItem2: function () {
       post("/user/delete",{name:this.delateNum})
        .then((data) => {
          if(data){
            message.success("删除成功")
            this.getdataList();
          }else{
            message.error("删除失败")
          }
          
        })
        this.showDeleteModal2 = false;
    },

    // 点击查看详情
    handleCancel: function(){
        this.showDeleteModal = false;
        this.showDeleteModal1 = false;
    },
    deleteItem: function () {
       this.showDeleteModal = false;
    },
    // 点击编辑
    handleCancel1: function(){
        this.showDeleteModal1 = false;
    },
    deleteItem1: function () {
          this.showDeleteModal1 = false;
    },
    
  },
  computed:{
    dataList(){
      return this.WLlist
    },
      deleteContent(){
          return  this.itemData&&`订单编号:${this.itemData.name} 
                 联系人手机:${this.itemData.age}
                  发货时间:${this.itemData.sendtime}
                  发货地址:${this.itemData.sendadd}
                 收货地址:${this.itemData.signadd}
                 物流状态:${this.itemData.tags}`
      },
      deleteContent1(){
          return   ""
      },
      deleteContent2(){
          return `你确定要删除${this?.delateNum}这个订单吗`
      }
  },
  components:{
      addForm:AddForm
  }
};
</script>
<style scoped>
    .head{
        margin-bottom: 20px;
    }
    .inp{
        border: 1px solid #ccc;
        padding: 3px 5px;
        font-size: 10px;
    }
    .btn{
        margin-left: 10px;
        background: white;
        border: none;
    }
</style>
